
<template>
<div class="wrap">
	<scroll  class="wrapper"> 
		<div class="inwrap">
			<ul>
				<li v-for="(itme,index) in  data">
					<!--订单编号-->
					<div class="serial"><span class="fl">订单编号 :  {{dindanxinxi.thedeal[index].serial}}</span><span class="fr colorred">交易完成</span></div>
					<!--产品信息-->
					<div id="Product-information">
						<div class="imgmodel"><img :src="itme.imgurl" alt="" /></div>
						<div class="twodiv">
							<p>{{itme.goodsname}}</p>
							<p>规格 : {{itme.specification}}</p>
							<p><span>¥<em>{{itme.price}}</em></span><span>x{{dindanxinxi.thedeal[index].gross}}件</span></p>
						</div>
					</div>
					<!--件数及费用合算-->
					<div class="total">
						<div class="fl">实付<span class="colorred">:¥ {{dindanxinxi.thedeal[index].totalprice}}</span></div>
						<div class="fr"><span class="colorred"></span><button >发表心得</button></div>
					</div>
				</li>
			</ul>
		
		</div>
	</scroll>
</div>
</template>

<script>
	import Scroll from "../../../../base/Scroll"
	export default{
		name:"Thedeal",
		data(){
			return{
				a:false,
				data:[],
				dindanxinxi:{
					thedeal:[]
				},
				shangpinzhuangtai:[]
			}
		},
		components:{
			Scroll
		},
		props:["shangpin"],
		created:function(){
			 this.data =this.shangpin.thedeal;
			 	if(this.$store.state.personInfor.length!=0){
				   var  dingdan = this.$store.state.personInfor[1].selectuser;
//				   console.log(dingdan);
				   for (var i=0; i<dingdan.length;i++ ) {
				   		this.shangpinzhuangtai.push(this.$store.state.personInfor[1].selectuser[i].zhuangtai);
						var shangpinbianhao=this.$store.state.personInfor[1].selectuser[i].dingdanbianhao;
					}	
					 for (var i=0; i<dingdan.length;i++ ) {
					 	if (this.shangpinzhuangtai[i]=="交易完成") {
					 		var shangpinbianhao=this.$store.state.personInfor[1].selectuser[i].dingdanbianhao;
							var shangpinshuliang=this.$store.state.personInfor[1].selectuser[i].shuliang;
							var dingdanzongjia  = this.$store.state.personInfor[1].selectuser[i].shuliang;
							this.dindanxinxi.thedeal.push({serial:shangpinbianhao,gross:shangpinshuliang,totalprice:199});
					 	}	
					}	
					console.log(this.dindanxinxi);
			}
		},
	}
</script>

<style scoped>
	.wrap{
		width: 100%;
		height: 100vh;
		background: #F2F2F2;
	}
	.wrapper{
		height: 78vh;
		overflow: hidden;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.colorred{
		color: red;
	}
	
	.inwrap ul{
		background: white;
		margin-bottom:6.42vh ;
	}
	.inwrap ul>li>div:nth-child(n){
		width: 94.4%;
		padding:0 2.8% ;
		border-bottom:1px  solid #CCCCCC;
	}
	.serial{
		height: 2.875rem;
	}
	.serial span{
		font-size: 1.2rem;
		line-height: 2.875rem;
	}
	/*产品信息*/
	#Product-information{
		vertical-align: top;
		height: 9.583rem;
		padding-left: 10.438%;
		position: relative;
	}
	.imgmodel{
		width: 4.792rem;
		height:4.792rem ;
		margin: 2.396rem;
		display: inline-block;
		text-align: center;
		vertical-align: 2rem;
	}
	#Product-information img{
		height: 100%;
	}
	#Product-information .twodiv{
		display: inline-block;
		width: 41.667%;
		height: 100%;
		position: relative;
        top:-1.354rem ;		
	}
	.twodiv>p:nth-child(1){
		font-size:1.3rem ;
		padding-top: 1rem;
		color: #4d4d4d;
	}
	.twodiv>p:nth-child(2){
		font-size:1.2rem ;
		color: #666666;
	}
	.twodiv>p:nth-child(3){
		padding-top: 2.396rem;
		font-size:1.2rem ;
		color: #666666;
	}
	.twodiv>p:nth-child(3)>span:nth-child(1){
		color: red;
	}
	.twodiv>p:nth-child(3)>span:nth-child(2){
		margin-left: 2rem;
		font-weight: 200;
	}
	.total{
		height: 4.217rem;
		line-height: 4.217rem;
		font-size: 1.3rem;
	}
	.total div{
		display: inline-block;
	}
	.total button{
		outline: none;
		font-size: 1.3rem;
		background: red;
		border-radius:1rem ;
		width: 6rem;
		margin-left: 1rem;
		color: white;
		font-weight: 200;
		border: 0;
	}
	
</style>



